<script setup xmlns="http://www.w3.org/1999/html">
import { reactive, ref, onMounted } from "vue";
import api from "../../api/index";
import { useStore } from 'vuex'
import { RouterLink, useRouter } from "vue-router";

const router = useRouter();
const store = useStore()
const accountSession = reactive([

])//这是一个数组

const signForm = reactive({
  username:"",
  password:""
})



const Login = () =>{
  api.loginHandle(signForm.username,signForm.password).then(res => {
    console.log(res);
    //这里首先要判断一下状态码
    var statusCode = res.data.status;
    console.log("statusCode is : "+statusCode);
    if (statusCode == "400"){
      console.log(res.data.message);
      //这里还要写一个逻辑，跳转到登录界面，还没写
    }else if (statusCode == "200"){
      accountSession.splice(0,accountSession.length);
      accountSession.push(...res.data.data);
      console.log(accountSession);
      console.log(accountSession[0].addr1);
      //以下代码用来存放session
      store.commit("setAccountUserid",accountSession[0].userid);
      store.commit("setAccountEmail",accountSession[0].email);
      store.commit("setAccountFirstName",accountSession[0].firstname);
      store.commit("setAccountLastName",accountSession[0].lastname);
      store.commit("setAccountStatus",accountSession[0].status);
      store.commit("setAccountAddr1",accountSession[0].addr1);
      store.commit("setAccountAddr2",accountSession[0].addr2);
      store.commit("setAccountCity",accountSession[0].city);
      store.commit("setAccountState",accountSession[0].state);
      store.commit("setAccountZip",accountSession[0].zip);
      store.commit("setAccountCountry",accountSession[0].country);
      store.commit("setAccountPhone",accountSession[0].phone);
      store.commit("setAccountfavCategory",accountSession[0].favcategory);
      //测试存放结果
      console.log(store.state.account_userid);
      //跳转到主界面
      router.push("/main");
    }
  })
}






</script>

<template>

  <div class="background-image">
    <br>
  <div id="login_box">
    <h2>LOGIN</h2>
    <div id="input_box">
      <input type="text" name="username" placeholder="请输入用户名" v-model="signForm.username">
    </div>
    <div class="input_box">
      <input type="password" name="password" placeholder="请输入密码" v-model="signForm.password">
    </div>
    <button @click="Login()">登录</button><br>
  </div>
    <br>
  </div>

</template>







<style scoped>
.background-image {
  background: url('../../assets/images/background1.jpg') no-repeat;
  background-size: 1000% 230%;
  background-size: cover;
}

#login_box {
  width: 20%;
  height: 400px;
  background-color: #00000060;
  margin: auto;
  margin-top: 10%;
  text-align: center;
  border-radius: 10px;
  padding: 50px 50px;
}

h2 {
  color: #ffffff90;
  margin-top: 5%;
}

#input-box {
  margin-top: 5%;
}

span {
  color: #fff;
}

input {
  border: 0;
  width: 60%;
  font-size: 15px;
  color: #fff;
  background: transparent;
  border-bottom: 2px solid #fff;
  padding: 5px 10px;
  outline: none;
  margin-top: 10px;
}

button {
  margin-top: 50px;
  width: 60%;
  height: 30px;
  border-radius: 10px;
  border: 0;
  color: #fff;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  background-image: linear-gradient(to right, #30cfd0, #330867);
}

#sign_up {
  margin-top: 45%;
  margin-left: 60%;
}

a {
  color: #b94648;
}
</style>